// 入口函数
$(function () {
    // ajax参数 多处要用  所以设置为全局变量
    let q = {
        pagenum: 1,	      // 是	int	页码值
        pagesize: 5,	  // 是	int	每页显示多少条数据
        cate_id: '',	  // 否	string	文章分类的 Id
        state: ''	      // 否	string	文章的状态，可选值有：已发布、草稿
    }

    // 初始化文章列表  封装成函数  以后重复使用
    // 调用
    initArticleList()
    // 封装
    function initArticleList() {
        let arr = [];
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功
            // 遍历
            res.data.data.forEach(ele => {
                arr.push(`
                        <tr>
                            <td><a href="javascript:;">${ele.title}</a></td>
                            <td>${ele.cate_name}</td>
                            <td>${formatDate(ele.pub_date)}</td>
                            <td>${ele.state}</td>
                            <td>
                            <button class="del-btn layui-btn layui-btn-xs layui-btn-danger" data-id="${ele.Id}">删除</button>
                            </td>
                        </tr>
                    `)
            })
            // 无缝连接字符串  赋值给tbody
            $('tbody').empty().html(arr.join(''))
            // 分页
            renderPage(res.data.total)
        });
    };

    //文章分类渲染   封装成函数
    // 调用
    initArtCateList();
    // 封装
    let layer = layui.layer;
    let form = layui.form;
    function initArtCateList() {

        // 定义数组
        let arr = ['<option value="">请选择文章类别</option>'];
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            // 判断
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            };
            res.data.data.forEach(ele => {
                arr.push(`
            <option value="${ele.Id}">${ele.name}</option>
            `);
            });
            // 获取字符串
            let str = arr.join('');
            // console.log(str);
            $('[name=cate_id]').empty().html(str);
            // form.render() 可以渲染layui中的 select/checkbox/radio
            form.render();  // 进行了标签转换
        })

    }

    // 筛选
    $('#searchForm').on('submit', function (e) {
        // 阻止默认提交
        e.preventDefault();
        // 修改cate_id 和 state的值  根据form表单里面的值修改
        q.cate_id = $("[name=cate_id]").val();
        q.state = $("[name=state]").val();
        // 重新渲染文章列表
        initArticleList()
    })

    // 重置
    $('#searchForm').on('reset', function (e) {
        // 阻止默认提交
        e.preventDefault();
        // 修改cate_id 和 state的值  赋值为空
        q.cate_id = '';
        q.state = '';
        // 重新渲染文章列表
        initArticleList()
    })

    // 分页   封装成函数
    //执行一个laypage实例
    let laypage = layui.laypage;
    function renderPage(total) {
        // total参数 表示总条数
        laypage.render({
            elem: 'pageBox',  //值为id  不用加#
            limit: q.pagesize,   //每页的条数
            count: total,   //数据总数
            curr: q.pagenum,    //当前页数
            // layout  控制显示元素
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            // limits 控制下拉选择的个数的数组
            limits: [2, 3, 5, 10],
            // jump   点击页码和每页显示条数切换分页 触发
            jump: function (obj, first) {
                // obj 保函了当前分页的所有参数
                // 判断非首次操作
                if (!first) {
                    // 把当前页改变，重新渲染文章列表
                    q.pagenum = obj.curr;
                    // 把当前条数改变，重新渲染文章列表
                    q.pagesize = obj.limit;
                    initArticleList();
                }
            },
        })
    }

    //删除文章  事件委托
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id');
        //eg1
        layer.confirm('是否确定删除？', { icon: 3, title: '提示' }, function (index) {
            // 发送ajax  删除文章
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                // 成功
                layer.msg('删除成功')
                // bug解决  再次刷新页面之前 
                // 发送ajax 删除文章成功 前端依然有这条数据 需要用数据覆盖
                // 页面中只有一个元素了 儿我收到了一个删除成功响应
                // 优化  短路运算
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--;
                // 渲染页面
                initArticleList()
            })
            layer.close(index);
        })

    });
















});